<template>
	<div class="flex flex-col">
		<div class="text-sm">【服务资源占比】</div>
		<div ref="echartsContainerRef" class="flex-1"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// Echarts渲染配置项
		renderOptions: () => {
			const servers = visualizationStore.data.serverData.servers;

			return {
				xAxis: {
					type: 'category',
					data: servers.map((item) => item.name),
					axisTick: { inside: true },
					boundaryGap: true,
				},
				yAxis: {
					show: false,
					axisLabel: { show: false },
					max: (value) => parseInt(value.max * 1.2),
				},
				grid: {
					left: 0,
					right: 1,
					bottom: 0,
					top: 0,
					containLabel: true,
				},
				series: {
					type: 'bar',
					data: servers.map((item) => item.value),
					barWidth: 16,
					label: {
						show: true,
						position: 'top',
						textStyle: { color: '#fff', fontSize: 12 },
						formatter: '{c}%',
					},
				},
			};
		},
	});
</script>

<style scoped></style>
